<template>
    <my-echart :name="echartName" :echartStyle="echartStyle" :option="option"></my-echart>
</template>
<script setup>
import { reactive, ref } from '@vue/reactivity'
import myEchart from './myEchart.vue'
const echartStyle = reactive({
    width: 'calc(40vw - 200px)',
    height: '400px'
})
let echartName = ref('myBar')

const option = reactive({
    tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['事件一 名称', '事件二 名称', '事件三 名称', '事件四 名称'],
          padding: [250, 6, 7, 8]
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '事件一 名称' },
              { value: 310, name: '事件二 名称' },
              { value: 234, name: '事件三 名称' },
              { value: 135, name: '事件四 名称' }
            ]
          }
        ]
    })
</script>